<script setup lang="ts">
  import { CSSProperties, computed } from 'vue'
  import { StrUtil } from '@xtail/core'
  import { GridItemPropsType } from './types'

  defineOptions({
    name: 'SGridItem'
  })

  const props = withDefaults(defineProps<GridItemPropsType>(), {
    colSpan: 1,
    rowSpan: 1,
    className: '',
    style: ''
  })

  const styleComputed = computed<string | CSSProperties>(() => {
    if (StrUtil.isStr(props.style)) {
      return (
        props.style + ';' + `grid-column: span ${props.colSpan}; grid-row: span ${props.rowSpan};`
      )
    } else {
      return {
        ...props.style,
        'grid-column': `span ${props.colSpan}`,
        'grid-row': `span ${props.rowSpan}`
      }
    }
  })
</script>

<template>
  <div class="s-grid-item" :class="className" :style="styleComputed">
    <slot />
  </div>
</template>

<style lang="scss">
  @use './style' as *;
</style>
